<template>
  <div class="avatar-list">
    <slot></slot>
  </div>
</template>

<script>
  import AAvatar from 'ant-design-vue/es/avatar/Avatar'
  import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
  const Item = {
    name: 'AvatarListItem',
    props: {
      size: {
        type: String,
        required: false,
        default: 'small',
      },
      src: {
        type: String,
        required: true,
      },
      tips: {
        type: String,
        required: false,
      },
    },
    methods: {
      renderAvatar(h, size, src) {
        return h(AAvatar, { props: { size: size, src: src } }, [])
      },
    },
    render(h) {
      const avatar = this.renderAvatar(h, this.$props.size, this.$props.src)
      return h('li', { class: 'avatar-item' }, [
        this.$props.tips
          ? h(ATooltip, { props: { title: this.$props.tips } }, [avatar])
          : avatar,
      ])
    },
  }
  export default {
    name: 'AvatarList',
    Item: Item,
  }
</script>

<style lang="less" scoped>
  .avatar-list {
    display: inline-block;
    margin-left: 8px;
    font-size: 0;
    .avatar-item {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-left: -8px;
      font-size: 14px;
      :global {
        .ant-avatar {
          width: 20px;
          height: 20px;
          border: 1px solid #fff;
        }
      }
    }
  }
</style>
